<template>
    <div>
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunbotuList" key="item.url">
                <img :src="item.img" alt="">
            </mt-swipe-item>
        </mt-swipe>
        
        <h3>HomeContainer</h3>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
    data(){
        return {
            lunbotuList: []
        };
    },
    created(){
        this.getLunbotu();
    },
    methods: {
        getLunbotu(){ //获取轮播图数据的方法
            this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
                if(result.body.status === 0){
                    this.lunbotuList = result.body.messages;
                }else{
                    Toast("加载轮播图失败");
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.mint-swipe{
    height: 200px;

    .mint-swipe-item {
        &:nth-child(1) {
            background-color: red;
        }
        &:nth-child(2) {
            background-color: green;
        }
        &:nth-child(3) {
            background-color: blue;
        }

        img{
            width: 100%;
            height: 100%;
        }
    }
}
</style>
